<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>content</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
            vertical-align: baseline;
            word-break:break-all;/*letter-spacing: 0.04rem;*/
            list-style: none;
        }
        input,button,a{outline: none;-webkit-tap-highlight-color: transparent;}

    </style>
    <script>
        window.onresize=textSize;
        function textSize(){
            var width=document.documentElement.clientWidth||document.body.clientWidth;
            var ratio=720/width;
            var con=document.getElementsByTagName('html')[0];
            con.style.fontSize=100/ratio+'px';
        };textSize();
    </script>
    <style>
        a {text-decoration: none;color:#000000;}
        .clear{ clear:both;}
        .cf:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
        .cf{zoom:1;}

        body{font-size: 0.28rem;color: #333;padding-top: 1rem;}
        .nav{position: fixed;width: 100%;height: 1rem;font-size: 0.35rem;color: #333;border-bottom: 1px solid #ccc;left: 0;top: 0;background-color: #fff;z-index: 2;}
        .nav-p{text-align: center;line-height: 1rem;}
        .nav-img{position: absolute;left: 0.2rem;top: 0.3rem;width: 0.4rem;}
        .nav-btn{position: absolute;right: 0.2rem;top: 0.3rem;width: 0.5rem;height: 0.5rem;font-size: 0.28rem;color: #666;width: 0.7rem;}
        .ma-img{width: 25%;margin: 0.5rem auto;display: block;}
        .ma-p{text-align: center;margin-top: -.2rem;}
        .m-login{margin-top: 0.6rem;padding: 0 0.5rem;}
        .mlh-img{width: 0.35rem;margin-right: 0.1rem;float: left;opacity: 0.7;}
        .ml-head span{float: left;color: #999;margin-top: 0.02rem;font-size: 0.21rem;display: inline-block;margin-top: .05rem;}
        .ml-row{border-bottom: 1px solid #ddd;margin-top: 0.2rem;}
        .ml-r-ipt1{float: left;width: 60%;border: none;padding: 0.2rem 0 0.15rem;background-color: transparent;font-size: 0.3rem;}
        .ml-r-btn1{float: right;width: 40%;border: none;background-color: transparent;padding: 0.2rem 0 0.15rem;color: #6092e8;text-align: right;display: none;font-size: 0.23rem;}
        .ml-btn{display: block;border: none;background-color: #169BD5;color: #fff;text-align: center;padding: 0.22rem 0;border-radius: 0.13rem;width: 100%;font-size: 0.35rem;margin-top: 0.55rem;}
        .m-fot{ width:100%;   position: fixed;padding:  0 0.4rem 0.2rem;font-size: 0.22rem;color: #999;bottom: 0;box-sizing:border-box;margin-top: 3.2rem;text-align: center;}
        .m-fot a{color: #999;text-decoration: underline;}

        .mask{position: fixed;width: 100%;height: 100%;z-index: 2;left: 0;top: 0;display: none;}
        .mask-box{width: 45%;margin: 4rem auto 0;text-align: center;background-color: rgba(0,0,0,0.8);border-radius: 0.2rem;padding: 0.2rem 0 0.05rem;}
        .mask-box-img{width: 30%;margin-bottom: 0.1rem;}
        .mask-p{color: #fff;margin-bottom: 0.2rem;}
        .block{display: block;}


    </style>
    <script src="image/jquery.min.1.1.js"></script>
</head>
<body>
<div class="model">
    <div class="nav">
        <img src="image/left.png" class="nav-img" onclick="document.location.href='zzx://back'" alt="">
        <p class="nav-p" >免密登录</p>
        <a class="nav-btn" href="http://ms.zzx9.cn/html/oauth/help.html">帮助</a><!-- http://m.zzx.cnklog.com -->
    </div>
    <div class="m-app"><!-- http://ms.zzx9.cn -->
        <img src="" class="ma-img" alt="">
        <p class="ma-p name">接入应用名称</p>
    </div>
    <div class="m-login">
        <div class="ml-head cf">
            <img src="image/cucc.png" class="mlh-img" alt="">
            <span>中国联通提供认证服务</span>
        </div>
        <div class="ml-row cf">
            <input type="number" name1="1" placeholder="手机号"  class="ml-r-ipt1">
            <button class="ml-r-btn1">切换登录方式</button>
        </div>
        <button class="ml-btn">确认登录</button>
    </div>
    <div class="m-fot">登录即同意<a href="http://ms.zzx9.cn/html/oauth/protocol.html">服务与隐私协议</a>应授权<span class="name">xxxx</span>获取本机号码</div>
</div>
<div class="mask">
    <div class="mask-box">
        <img src="image/loading.gif" class="mask-box-img" alt="">
        <p class="mask-p">请稍后</p>
    </div>
</div>
<script>
    var json={
        imgSrc:'image/cucc.png',
        name:'接入应用名称',
    };
    $('.ma-img').attr('src',json.imgSrc);
    $('.name').html(json.name);
    // //开启提示弹窗  传入提示文字
    function open(value){
        $('.mask').addClass('block').find('.mask-p').html(value);
    };
    //关闭提示弹窗
    function close(){
        $('.mask').removeClass('block');
    };
    // 设置应用名称
    function setAppName(name){
        $('.name').html(name);
    };
    // 登录点击
    $('.ml-btn').click(function(){
        if ($('.ml-r-ipt1').attr('name1')==1){
            var reg2=/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/i;//手机号
            if (!reg2.test($('.ml-r-ipt1').val())){
                open('请输入正确的手机号');
                setTimeout( function(){
                    close();
                },1000);
                return false;
            }
        }
        open('请稍后');
        setTimeout(function(){
            if ($('.ml-r-ipt1').attr('name1')==1){
                document.location.href='zzx://login?mobile='+$('.ml-r-ipt1').val();
            }else{
                document.location.href='zzx://login';
            }
        },1);
    });
    // 切换回掉
    $('.ml-r-btn1').click(function(){
        document.location.href='zzx://switch';
    });

    //初始化页面
    /**
     *name 应用名称
     *model 操作模式，0:免密登录，提示“本机号码登录”，不可编辑，1:号码认证，提示“请输入号码”，可编辑
     *w 账号切换，0:显示“账号切换“，1:”隐藏账号切换“
     */
    function initAndroid(json){
        init(json.appName,json.mode,json.switchBt);
    };

    function init(name,mode,w){
        $('.name').html(name);
        if (mode==0){
            $('.nav-p').html('免密登录');
            $('.ml-r-ipt1').attr({'placeholder':'本机号码登录','disabled':'disabled','name1':'0'});
        }else if (mode==1){
            $('.nav-p').html('号码认证');
            $('.ml-r-ipt1').attr({'placeholder':'请输入号码','name1':'1'}).removeAttr('disabled');
        }
        if (w==0){
            $('.ml-r-btn1').addClass('block');
        }else if (w==1){
            $('.ml-r-btn1').removeClass('block');
        }
    };

    /**
     *免密登录模式下的结果，形如“185****7838”
     */
    function resultAndroid(json){
        result(json.data,json.msg);
    };

    /**
     *免密登录模式下的结果，形如“185****7838”
     */
    function result(data,msg){
        open(msg);
        if (data != '') {
            $('.ml-r-ipt1').val(data).attr('disabled','disabled');
            setTimeout(function(){
                document.location.href='zzx://back';
            },800);
        }else{
            setTimeout(function(){
                close();
            },800);
        }
    };
 var windheight = $(window).height();  /*未唤起键盘时当前窗口高度*/
        
$(window).resize(function(){
   var docheight = $(window).height();  /*唤起键盘时当前窗口高度*/        
   if(docheight < windheight){            /*当唤起键盘高度小于未唤起键盘高度时执行*/
      $(".m-fot").css("position","static");
   }else{
      $(".m-fot").css("position","fixed");
   }           
});
</script>

</body>
</html> 
